<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/src/initializer.js"></script>
    <title>首页</title>
</head>
<body>
<div id="app" v-loading="loading" style="background-image: linear-gradient(to top, #330867 0%, #30cfd0 100%);">
    <!--   无文章视图     -->
    <el-empty description="您未发表过博客,快来编写第一篇文章吧" v-if="!articleInfo.total&&!searching">
    </el-empty>
    <el-empty description="没有找到对应文章" v-if="!articleInfo.total&&searching">
    </el-empty>
    <template v-else>
        <!--    有文章视图        -->
        <blog-article-list v-show="!searching" style="margin: 0 auto;" :article-list-info="articleInfo" @page-change="pageChange"></blog-article-list>
        <blog-article-list v-show="searching" style="margin: 0 auto;" :article-list-info="articleInfo" @page-change="pageChangeWhileSearching"></blog-article-list>
    </template>
</div>
</body>
<script>
    let keyword = ''
    function render() {
        new Vue({
            el: '#app',
            data: {
                userId: 0,
                articleInfo: {
                    list: [],
                    total: 0
                },
                newArticle: {
                    aid: 0,
                    title: "",
                    content: ""
                },
                isLogin: false,
                loading: false,
                searching: false,
                keyWord: ''
            },
            // async声明这个函数为异步函数，async函数的返回值为“已兑现”状态的Promise
            async mounted(){
                await this.loadArticleList()
                await this.loadUserInfo()
            },
            methods: {
                pageChange(page) {
                    this.loadArticleList(page)
                },
                async pageChangeWhileSearching(page) {
                    this.loading = true
                    try {
                        const info = (await axios(Api.getArticleListByKeyWord(this.userId, keyword, page))).data
                        this.searching = true
                        this.loading = false
                        this.articleInfo = info
                    } catch(e) {
                        this.loading = false
                        if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                },
                async loadArticleList(page = 1) {
                    this.loading = true
                    try {
                        const info = (await axios(Api.getArticleList(this.userId, page))).data
                        console.log(info)
                        this.loading = false
                        this.articleInfo = info
                    } catch(e) {
                        this.loading = false
                        if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                },
                async loadUserInfo() {
                    try{
                        await axios(Api.getUserInfo())
                        this.isLogin = true
                    }catch (e) {
                        this.isAuthor = false
                        this.isLogin = false
                        if(e.response.data.code==403) {
                        }else if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                },
                async searchArticle(page = 1) {
                    this.loading = true
                    try {
                        keyword = this.keyWord
                        const info = (await axios(Api.getArticleListByKeyWord(this.userId, keyword, page))).data
                        this.searching = true
                        this.loading = false
                        this.articleInfo = info
                    } catch(e) {
                        this.loading = false
                        if(e.response) {
                            this.$alert(e.response.data.message)
                        }else {
                            this.$alert("网络错误")
                        }
                    }
                }
            }
        })
    }
    init(['blog-article']).then(render)
</script>
</html>